<template>
    <view class="container">
        <!-- <uni-card is-full :is-shadow="false">
            <text class="uni-h6">弹出层组件用于弹出一个覆盖到页面上的内容，使用场景如：底部弹出分享弹窗、页面插屏广告等。</text>
        </uni-card> -->

        <!--         <uni-section title="对话框示例" type="line">
            <view class="example-body box">
                <button class="button popup-error" @click="dialogToggle('error')"><text
                        class="button-text error-text">删除</text></button>
            </view>
        </uni-section> -->

        <!-- 提示窗示例 -->
        <view>
            <uni-popup ref="alertDialog" type="dialog">
                <uni-popup-dialog :type="state.msgType" cancelText="取消" confirmText="删除" title="确定删除？" content="删除后无法找回"
                    @confirm="dialogDeleteConfirm" @close="dialogClose"></uni-popup-dialog>
            </uni-popup>
        </view>
    </view>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue';

const emit = defineEmits(['delete-confirm']);

// 使用reactive创建响应式对象
const state = reactive({
    msgType: 'error',
});

// 使用ref创建引用
const alertDialog = ref<InstanceType<any> | null>(null);

// 方法
const dialogToggle = (type: typeof state.msgType) => {
    state.msgType = type;
    if (alertDialog.value) alertDialog.value.open();
};

const dialogDeleteConfirm = () => {
    emit('delete-confirm');
};

const dialogClose = () => {
    console.log('点击关闭');
};

defineExpose({
    doPopup: dialogToggle,
})
</script>

<style lang="scss">
@mixin flex {
    /* #ifndef APP-NVUE */
    display: flex;
    /* #endif */
    flex-direction: row;
}

.box {
    @include flex;
}

.button {
    @include flex;
    align-items: center;
    justify-content: center;
    flex: 1;
    height: 35px;
    margin: 0 5px;
    border-radius: 5px;
}

.example-body {
    background-color: #fff;
    padding: 10px 0;
}

.button-text {
    color: #fff;
    font-size: 12px;
}

.popup-error {
    color: #fff;
    background-color: #fde2e2;
}

.error-text {
    color: #f56c6c;
}
</style>